<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../css/css.css" />
		<script type="text/javascript" src="../lib/mootools-core-nc.js"></script>
		<script type="text/javascript" src="../lib/mootools-more.js"></script>
		<script type="text/javascript" src="../js/mootools.slide.js"></script>
		<script type="text/javascript" src="../js/print_r.js"></script>
	</head>
	<body id="body_node">
		<h1>slide 活动效果</h1>
		<div id="slideStart" class="slide">Start</div><br />
		<div id="slideCancel" class="slide">Cancel</div><br />
		<div id="slideComplete" class="slide">Complete</div><br />
		<input type="button" name="openA" id="openA" value="打开A" /><br />
		<input type="button" name="closeA" id="closeA" value="关闭A" /><br />
		<div id="slideA" class="slideDiv">
			Here is some content - A. Notice the delay before onComplete fires.  This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.
		</div>
		<input type="button" name="openB" id="openB" value="打开B" /><br />
		<input type="button" name="closeB" id="closeB" value="关闭B" /><br />
		<div id="slideB" class="slideDiv">
			Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events.  This slide is set up with the option "link: 'chain'"
		</div>
		<input type="button" name="openC" id="openC" value="打开C" /><br />
		<div id="slideC" class="slideDiv">Here is some content - C</div>
		<input type="button" name="openD" id="openD" value="打开D" /><br />
		<div id="slideD" class="slideDiv">
			Here is some content - D. Notice how I am not hooked into any events.  This was done with the .slide shortcut.
		</div>
		<input type="button" name="openE" id="openE" value="打开E" /><br />
		<div id="slide_wrap">
			<div id="slideE" class="slide">Here is some content - E</div>
		</div>
	</body>
</html>